<template>
	<view class="report">
		<view class="panel panel-a">
			<view class="panel-header">
				<picker class="" mode="date" fields="month" @change="bindDateChange">
					<view class="panel-header-left cal">
						<image
							class="cal-left icon" 
							mode="aspectFit" 
							src="@/static/icon/icon-cal.png">
						</image>
						<view class="cal-right">
							{{month}}
						</view>
					</view>
				</picker>
				<view class="panel-header-right">
					<view class="list list-total">
						<view class="list-group">
							<view class="list-item text-grey">总记录{{ totalNum }}</view>
							<view class="list-item text-gold">已处置{{ hasDisposalNum }}</view>
							<view class="list-item text-warning">未处置{{ notDisposedNum }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel-body">
				<view class="list list-a">
					<view class="list-group">
						<view class="list-item" v-for="(item, index) in reports" :key="index">
							<view class="card card-b">
								<view class="card-left" @tap="viewImage(item.path)">
									<image 
										class="img" 
										mode="aspectFit" 
										:src="item.path[0]">
									</image>
								</view>
								<view class="card-mid">
									<view class="card-title">{{ item.reportType | getDictLabel(reportTypes, 'dict_value' )}}</view>
									<view class="card-subTit">上报时间：{{item.reportTime}}</view>
									<view class="card-subTit">问题状态：<text :class="{'text-warning': item.emergencyStatus == 1}">{{ item.emergencyStatus | getDictLabel(emergencyStatuses, 'dict_value' )}}</text></view>
								</view>
								<view class="card-right label label-warning" v-if="item.dealStatus == '1'">
									<view class="label-left">
										<image 
											class="icon" 
											mode="aspectFit" 
											src="@/static/icon/icon_warning.png">
										</image>
									</view>
									<view class="label-right">未处置</view>
								</view>
								<view class="card-right label label-gold" v-else>
									<view class="label-left">
										<image 
											class="icon" 
											mode="aspectFit" 
											src="@/static/icon/icon_gold.png">
										</image>
									</view>
									<view class="label-right">已处置</view>
								</view>
							</view>
						</view>
						
					</view>
					
					<slot name="status"></slot>
				</view>
			</view>
			
		</view>	
		
		<uni-popup ref="modalReport" type="bottom">
			<view class="report">
				<view class="form form-b">
					<view class="form-group">
						<view class="form-item" v-for="(item, index) in baseData" :key='index'
							:class="{'form-item-ver': item.type == 'images' || item.type == 'textarea'}">
							<view class="form-item-header">{{item.label}}：</view>
							<view class="form-item-body" v-if="item.type == 'select'">
								<picker :value="item.index" :range="item.options"
									:range-key="item.field == 'district' ? 'name' : 'dict_label' "
									@change="bindPickerChange($event, item.field)">
									<view class="select">
										<view class="select-selected">
											{{ item.value | getDictLabel(item.options, item.field == 'district' ? 'district' : 'dict_value', item.field == 'district' ? 'name' : 'dict_label') || '请选择' }}
										</view>
										<view class="select-btn">
											<uni-icons class="icon" type="arrowdown" font-family="iconfont" size="15"
												color="#a9a9a9">
											</uni-icons>
										</view>
									</view>
								</picker>
							</view>
							<view class="form-item-body" v-else-if="item.type == 'images'">
								<view class="list list-photo">
									<view class="list-group">
										<view class="list-item" v-for="(option, index) in item.options" :key="index">
											<view class="card card-a" @tap="bindPreviewImage(item.field, index)">
												<view class="card-header">
												</view>
												<view class="delete" @tap.stop.prevent="bindDelPic(item.field,index)">
													<image class="icon" mode="aspectFit"
														src="@/static/icon/delete-icon.png">
													</image>
												</view>
												<view class="card-body">
													<image class="pic" mode="aspectFit" :src="option"></image>
												</view>
											</view>
										</view>
										<view class="list-item" v-show="item.options.length < 4">
											<view class="card card-a card-add" @tap="bindChooseImage(item.field)">
												<view class="card-body">
													<uni-icons class="icon" type="plusempty" font-family="iconfont"
														size="42" color="#a9a9a9">
													</uni-icons>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="form-item-body" v-else-if="item.type == 'textarea'">
								<textarea class="form-control" v-model="item.value"></textarea>
							</view>
							<view class="form-item-body" v-else>
								<input class="form-control" type="text" v-model="item.value" placeholder="请输入" />
							</view>
						</view>
					</view>
				</view>
				
				<view class="btns">
					<view class="btns-group">
						<view class="btns-item">
							<button class="btn" @tap="submit">提交</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { queryDisposeCaseNum, queryDisposeCase, getDicts, uploadPic, uploadReport ,createReport} from '@/api/configure.js';
import { deepClone, getToken, toLogin, getLocation, moveToLocation, mergeUrls, cleanData, chooseImage, previewImage} from '@/util/util.js';
import configUrl from '@/util/url.js';

export default {
	props: {
		value:{
			type:  Object,
			default: () => {
				return {}
			}
		},
		list: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {
			reports: [],
			notDisposedNum: '',
			totalNum: '',
			hasDisposalNum: '',
			otherParams: {},
			emergencyStatuses: [],
			reportTypes: [],
			baseData: [{
				type: 'select',
				field: 'reportType',
				label: '上报类型',
				value: '',
				index: '',
				options: [],
			}, {
				type: 'select',
				field: 'emergencyStatus',
				label: '问题紧急状态',
				value: '',
				index: '',
				options: [],
			}, {
				type: 'images',
				field: 'reporUrl',
				label: '上报照片',
				value: '',
				options: [],
				urls: []
			}, {
				type: 'textarea',
				field: 'describe',
				label: '问题描述',
				value: ''
			}],
			month: ''
		}
	},
	methods: {
		async queryNum() {
			if(!this.otherParams.mediaId){
				return 
			}
			
			let params = {
				mediaId: this.otherParams.mediaId
			}
			
			let { data } = await queryDisposeCaseNum(params);
			
			this.totalNum = data.deal_status;
			this.notDisposedNum = data.deal_status1;
			this.hasDisposalNum = data.deal_status2;
		},
		async getAllDicts(){
			let ds = [getDicts({'type': 'selectReportType'}), getDicts({'type': 'selectEmergencyStatus'})];
			
			let dits = await Promise.all(ds);
			
			this.baseData.forEach(item => {
				if (item.field == 'reportType') {
					item.options = dits[0].data.slice(0);
					this.reportTypes = dits[0].data.slice(0);
				} else if(item.field == 'emergencyStatus') {
					item.options = dits[1].data.slice(0);
					this.emergencyStatuses = dits[1].data.slice(0);
				}else {
					
				} 
			})
		},
		bindPickerChange(e, field){
			let index = e.detail.value ;
			let select = this.baseData.find(item => item.field == field);
			
			select.index = index;
			
			if(select.field == 'district') {
				select.value = select.options[index]['district'];
			} else {
				select.value = select.options[index]['dict_value'];
			}
		},
		bindDateChange(e) {
			let month = e.target.value
			
			this.month = month;
			
			this.$emit('dateChange', {'value': month})
		},
		async bindChooseImage(field) {
			let {tempFilePaths} = await chooseImage();
			
			let data = {
				tempFilePath: tempFilePaths[0],
				name: 'avatarfile'
			}
			 
			let imgUrl = await uploadReport(data);
			
			if (imgUrl) {
				let images = this.baseData.find( item => item.field == field);
				images.urls.push(imgUrl);
				
				let url = `${configUrl.CASEIMAGE_URL}${imgUrl}`;
				
				images.options.push(url);
			}
		},
		async bindDelPic(field, index) {
			let pic = this.baseData.find( item => item.field == field);
			
			pic.options.splice(index, 1);
			pic.urls.splice(index, 1);
		},
		bindPreviewImage(field, index) {
			let pic = this.baseData.find( item => item.field == field);
			
			let data = {
				current: index,
				urls: pic.options
			}
			
			previewImage(data);
		},
		viewImage(urls) {
			let data = {
				current: 0,
				urls: urls
			}
			
			previewImage(data);
		},
		async createReport() {
			let params = {};
			
			this.baseData.forEach( item => {
				if (item.field == 'reporUrl') {
					params[item.field] = item.urls.join(',');
				} else {
					params[item.field] = item.value;
				}
			})
			
			let isEmptyItem = this.baseData.find( item => item.field == 'reporUrl' ? (item.urls.length == 0) : (!item.value) );
			
			if(isEmptyItem) {
				uni.showToast({
					title: `${isEmptyItem.label}不能为空`,
					duration: 2000,
					icon: 'none'
				});
				
				return
			}
			
			params.mediaId = this.otherParams.mediaId;
			params.lng = this.otherParams.lng;
			params.lat = this.otherParams.lat;
			
			let { code } = await createReport(params);
			
			if ( code == 200 ) {
				await this.refreshPage();
				this.$emit('refreshReport', {});
				this.closeModal();
			}
			
		},
		async submit() {
			this.createReport();
		},
		async setOtherParams(val) {
			this.otherParams = deepClone(val);
			await this.refreshPage();
		},
		async refreshPage() {
			await this.queryNum();
		},
		openModal() {
			this.$refs.modalReport.open('bottom');
		},
		closeModal() {
			this.$refs.modalReport.close();
		},
		async init() {
			this.reports = deepClone(this.list);
			await this.getAllDicts();
		}
	},
	watch: {
		value: {
			handler(val, oldVal) {
				this.setOtherParams(val);
			},
			deep: true
		},
		list: {
			handler(val, oldVal) {
				this.reports = deepClone(val);
			},
			deep: true
		}
	},
	created() {
		this.init();
	},
	mounted() {}
}
</script>

<style lang="scss" scoped>
	.report{
		background-color: #ffffff;
		padding: 20rpx 0rpx;
	}
	
	.cal{
		display: flex;
		.cal-left{
			width: 32rpx;
			height: 32rpx;
			overflow: hidden;
		}
		.cal-right{
			padding: 2rpx 8px;
			font-size: 24rpx;
			line-height: 28rpx;
		}
	}
	
	.list {
		&.list-photo {
			.list-group {
				display: flex;
				.list-item {
					width: 25%;
					display: flex;
					justify-content: center;
				}
			}
		}
		
		&.list-total{
			.list-group{
				display: flex;
				.list-item {
					margin-left: 17rpx;
					padding: 2rpx 0px;
					font-size: 24rpx;
					line-height: 28rpx;
				}
			}	
		}
		
		&.list-a{
			.list-group{
				padding: 22rpx 0rpx 0rpx 0rpx;
				.list-item{
					padding:12rpx 17rpx;
					margin-bottom: 20rpx;
					position: relative;
					top: 0rpx;
					left: 0rpx;
					&:after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 30rpx;
						right: 30rpx;
						z-index: 1;
						height: 1rpx;
						background-color: #f3f5fb;
					}
				}
			}
		}
	}
	
	.panel{
		&.panel-a{
			background-color: #ffffff;
			padding: 21rpx 56rpx 0rpx;
			.panel-header{
				padding: 11rpx 0rpx 11rpx 12rpx;
				border-bottom: 2rpx solid #f3f5fb;
				display: flex;
				.panel-header-left{
					width: 180rpx;
					.icon{
						width: 32rpx;
						height: 32rpx;
					}
				}
				
				.panel-header-right{
					width: calc(100% - 180rpx);
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}
	
	.label{
		display: flex;
		.label-left{
			height: 30rpx;
			width: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				width: 20rpx;
				height: 20rpx;
			}
		}
		.label-right{
			font-size: 24rpx;
			line-height: 30rpx;
		}
		&.label-gold{
			.label-right{
				color: #fe8f00;
			}
		}
		&.label-warning{
			.label-right{
				color: #c40808;
			}
		}
	}
	
	.btns {
		.btns-group {
			padding: 25rpx 167rpx 25rpx;
			.btns-item {
				.btn {
					height: 90rpx;
					padding: 23rpx 0rpx;
					border-radius: 90rpx;
					background-image: linear-gradient(to right, #44afee, #3a8eed);
					font-size: 36rpx;
					color: #ffffff;
					line-height: 44rpx;
				}
			}
		}
	}
	
	.form {
		.form-group {
			.form-item {
				margin-bottom: 23rpx;
				padding: 0rpx 60rpx;
				display: flex;
	
				.form-item-header {
					height: 46rpx;
					padding: 6rpx 0rpx;
					font-size: 28rpx;
					line-height: 34rpx;
					text-align: justify;
					box-sizing: border-box;
				}
	
				.form-item-body {
					.cals{
						.cals-group{
							display: flex;
							justify-content: space-between;
							.cals-item{
								border: 1rpx solid #d7d7d7;
								border-radius: 4rpx;
								background-color: #ffffff;
								position: relative;
								top: 0rpx;
								left: 0rpx;
								flex-grow: 1;
								.cals-item-left{
									padding: 8rpx 6rpx;
									padding-right: 46rpx;
									font-size: 24rpx;
									line-height: 30rpx;
									height: 46rpx;
									box-sizing: border-box;
								}
								.cals-item-right{
									width: 46rpx;
									height: 46rpx;
									position: absolute;
									top: 0rpx;
									right: 0rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									.icon{
										width: 24rpx;
										height: 24rpx;
									}
								}
							}
							.cals-sign{
								margin:23rpx 5rpx;
								width: 20rpx;
								height: 1rpx;
								background-color: #c6c6c8;
							}
						}
						
					}
					
					.form-control {
						padding: 6rpx 6rpx;
						border: 1rpx solid #d7d7d7;
						border-radius: 4rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						background-color: #ffffff;
						
					}
	
					textarea{
						&.form-control{
							height: 100rpx;
						}
					}
					
					.select {
						border: 1rpx solid #d7d7d7;
						border-radius: 4rpx;
						background-color: #ffffff;
						position: relative;
						top: 0rpx;
						left: 0rpx;
	
						.select-selected {
							padding: 8rpx 6rpx;
							padding-right: 46rpx;
							font-size: 24rpx;
							line-height: 30rpx;
							height: 46rpx;
							box-sizing: border-box;
						}
	
						.select-btn {
							width: 46rpx;
							height: 46rpx;
							position: absolute;
							top: 0rpx;
							right: 0rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					
					.addr{
						position: relative;
						top: 0rpx;
						left: 0rpx;
						.addr-input{
							padding-right: 46rpx;
						}
						.addr-btn{
							width: 46rpx;
							height: 46rpx;
							position: absolute;
							top: 0rpx;
							right: 0rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							.icon{
								width: 61.8%;
								height: 61.8%;
							}
						}
					}
					
					.area {
						display: flex;
						.area-item {}
						.area-sign {
							padding: 10rpx 8rpx 8rpx 8rpx;
							font-size: 24rpx;
							line-height: 30rpx;
							height: 46rpx;
							box-sizing: border-box;
						}
					}
				}
	
				&.form-item-ver {
					flex-direction: column;
	
					.form-item-body {
						width: 100%;
					}
				}
			}
		}
	}
	
	.form-b {
		.form-item-header {}
		.form-item-body {
			flex-grow: 1;
		}
	}
	
	.card {
		&.card-a{
			width: 123rpx;
			height: 116rpx;
			position: relative;
			top: 0rpx;
			left: 0rpx;
			.card-header {
				width: 100%;
				height: 31rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				background-color: #000000;
				opacity: 0.3;
				z-index: 2;
			}
			
			.delete {
				width: 31rpx;
				height: 31rpx;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				z-index: 3;
				display: flex;
				justify-content: center;
				align-items: center;
			
				.icon {
					width: 20rpx;
					height: 20rpx;
				}
			}
			.card-body {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #ffffff;
				border: 1rpx solid #d9d9d9;
				.pic{
					width: 100%;
					height: 100%;
				}
			}
		}
		&.card-b{
			display: flex;
			position: relative;
			top: 0rpx;
			left: 0rpx;
			.card-left{
				width: 109rpx;
				height: 111rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.card-mid{
				padding: 0rpx 0rpx 0rpx 14rpx;
				width: calc(100% - 109rpx);
				box-sizing: border-box;
			}
			.card-title{
				font-size: 26rpx;
				line-height: 32rpx;
				color: #1c1c1c;
			}
			
			.card-subTit{
				font-size: 24rpx;
				line-height: 38rpx;
				color: #8d8d8d;
			}
			
			.card-right{
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
			}
		}
	}
</style>

